<template>
  <div>
    <el-container>
      <el-aside width="400px">
        <el-image
          style="width: 300px; height: 300px; margin: 100px 50px 10px 50px"
          :src="url"
          fit="fill"
        ></el-image>
        <el-upload
          class="upload-demo"
          action="http://101.43.44.19:8080/api/upload/image"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <el-button size="small" style="margin-left: 150px" type="primary"
            >点击上传</el-button
          >
        </el-upload>
        <el-button
          size="small"
          style="margin: 10px 0 0 140px"
          :disabled="edit"
          type="primary"
          @click="editImage"
          >确认修改头像</el-button
        >
      </el-aside>
      <el-main
        ><el-descriptions
          direction="vertical"
          class="margin-top"
          title="个人信息"
          :column="2"
          border
        >
<!--          <el-descriptions-item>-->
<!--            <template slot="label">-->
<!--              <i class="el-icon-user"></i>-->
<!--              账号ID-->
<!--            </template>-->
<!--            {{ info.id }}-->
<!--          </el-descriptions-item>-->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱
            </template>
            {{ info.email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ info.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile"></i>
              电话
            </template>
            {{ info.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-coordinate"></i>
              性别
            </template>
            <el-tag type="info" v-if="info.sex == '-1'">保密</el-tag>
            <el-tag type="" v-else-if="info.sex == '0'">男性</el-tag>
            <el-tag type="success" v-else-if="info.sex == '1'">女性</el-tag>
            <el-tag type="warning" v-else-if="info.sex == '2'">其他</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-timer"></i>
              出生日期
            </template>
            {{ this.info.birth }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-map-location"></i>
              地址
            </template>
            {{ info.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-open"></i>
              状态
            </template>
            <el-tag type="danger" v-if="info.status == '-1'">删除</el-tag>
            <el-tag type="warning" v-else-if="info.status == '0'">禁用</el-tag>
            <el-tag type="success" v-else>正常</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-coordinate"></i>
              身份类型
            </template>
            <el-tag type="info" v-if="info.type == '1'">快递员</el-tag>
            <el-tag type="" v-else-if="info.type == '2'">网点管理员</el-tag>
            <el-tag type="success" v-else-if="info.type == '3'"
              >超级管理员</el-tag
            >
            <el-tag type="info" v-else>用户</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              创建时间
            </template>
            {{ info.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-time"></i>
              更新时间
            </template>
            {{ info.updateTime }}
          </el-descriptions-item>

          <el-descriptions-item v-if="info.type != undefined && info.network != undefined ">
            <template slot="label">
              <i class="el-icon-s-grid"></i>
              网点
            </template>
            {{ info.network.name }}
          </el-descriptions-item>
        </el-descriptions></el-main
      >
    </el-container>
    <el-button
      style="margin-left: 420px"
      v-if="ishow"
      type="primary"
      @click="dialogVisible = true"
      >完善个人信息</el-button
    >
    <el-dialog title="完善个人信息" :visible.sync="dialogVisible" width="40%">
      <span
        ><el-card class="filter-container" shadow="never">
          <el-form
            :inline="true"
            :model="editMessage"
            size="small"
            label-width="140px"
          >
            <el-form-item label="姓名:">
              <el-input
                style="width: 203px"
                v-model="editMessage.name"
                placeholder="请输入要搜索的姓名"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="性别:">
              <el-select
                v-model="editMessage.sex"
                placeholder="请选择性别"
                style="width: 203px"
                clearable
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="出生日期">
              <el-date-picker
                v-model="editMessage.birth"
                type="date"
                placeholder="选择日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-form> </el-card
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogVisible = false), completeInfo()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "adminHome",
  data() {
    return {
      info: {
        address: "",
        birth: "",
        createTime: "",
        email: "",
        id: "",
        name: "",
        phone: "",
        sex: "",
        status: "",
        type: "",
        updateTime: "",
        network:""
      },
      url: "",
      edit: true,
      ishow: false,
      dialogVisible: false,
      sexOptions: [
        {
          value: "1",
          label: "女性",
        },
        {
          value: "0",
          label: "男性",
        },
        {
          value: "2",
          label: "其他",
        },
        {
          value: "-1",
          label: "保密",
        },
      ],
      editMessage: {
        birth: "",
        name: "",
        sex: "",
      },
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    getinfo() {
    },
    handleAvatarSuccess(res) {
      if (res.code != "200") {
        this.$message.error("文件格式不支持");
      } else {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.url = res.value;
        this.edit = false;
      }
    },
    editImage() {
      this.axios
        .post("api/user/updateImage?imageUrl=" + this.url)
        .then((response) => {
          if (response.data.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.edit = true;
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("修改失败");
        });
    },
    completeInfo() {
      if (this.editMessage.birth != "") {
        var birth = new Date(this.editMessage.birth)
          .toLocaleString()
          .replace(/\//g, "-");
      }
      this.axios
        .post(
          "api/auth/customer/completeInfo?birth=" +
            birth +
            "&name=" +
            this.editMessage.name +
            "&sex=" +
            this.editMessage.sex
        )
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getinfo()
          } else {
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          this.$message.error("修改失败");
        });
    },
  },
};
</script>